<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Let the user specify a numeric value with slider component. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="Slider, HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Slider - Metro 4 :: Popular HTML, CSS and JS library</title>

    <style>
        .custom-marker {
            width: 24px!important;
            height: 24px!important;
        }
    </style>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Slider</a></li>
                    <li class="toc-entry"><a href="#_slider_about">About slider</a></li>
                    <li class="toc-entry"><a href="#_slider_value">Slider value</a></li>
                    <li class="toc-entry"><a href="#_slider_accuracy">Accuracy</a></li>
                    <li class="toc-entry"><a href="#_slider_target">Additional target</a></li>
                    <li class="toc-entry"><a href="#_slider_buffer">Buffer</a></li>
                    <li class="toc-entry">
                        <a href="#_slider_hint">Hint</a>
                        <ul>
                            <li class="toc-entry"><a href="#_slider_hint_position">Position</a></li>
                            <li class="toc-entry"><a href="#_slider_hint_value">Value</a></li>
                        </ul>
                    </li>
                    <li class="toc-entry"><a href="#_slider_options">Options</a></li>
                    <li class="toc-entry"><a href="#_slider_events">Events</a></li>
                    <li class="toc-entry"><a href="#_slider_methods">Methods</a></li>
                    <li class="toc-entry"><a href="#_slider_observe">Observe</a></li>
                    <li class="toc-entry"><a href="#_slider_customize">Customize</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Slider</h1>
                <p class="text-leader">
                    Let the user specify a numeric value with slider component.
                </p>

                <!-- ads-html -->

                <h3 id="_slider_about">About slider</h3>
                <p>
                    Component <code>slider</code> let the user specify a numeric value which must be no less than a given value, and no more than another given value.
                    To create <code>slider</code> add attribute <code>data-role="slider"</code> to element.
                </p>
                <div class="example">
                    <input data-role="slider" data-value="50">
                </div>
                <pre><code>
                    &lt;input data-role="slider"&gt;
                </code></pre>

                <p>
                    Metro 4 support two type of slider: <code>vertical</code> and <code>horizontal</code> (default).
                    To create <code>vertical</code> slider, add attribute <code>data-vertical="true"</code> to element.
                    To set specific size of the <code>slider</code>, use attribute <code>data-size</code>.
                    He sets the <code>width</code> for <code>horizontal</code> and <code>height</code> for the <code>vertical</code> slider.
                </p>

                <div class="example">
                    <div class="row flex-justify-center flex-align-center">
                        <div class="cell-md-6">
                            <input id="s1" data-role="slider" data-value="50">
                        </div>
                        <div class="cell-md-6">
                            <input id="s2" class="mx-auto" data-role="slider" data-vertical="true" data-size="200" data-value="50">
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;input data-role="slider" data-vertical="true" data-size="200"&gt;
                </code></pre>

                <h3 id="_slider_value">Slider value</h3>
                <p>
                    The slider in Metro 4 can return <strong>two</strong> types of values: the <code>actual value</code> and its equivalent in <code>percent</code>.
                    How the value will be returned determines the attribute <code>data-return-type</code>, it can take two values: <code>value</code> and <code>percent</code>.
                    By default slider return <code>actual value</code>.
                    To return value in percent equivalent, set this attribute to <code>data-return-type="percent"</code>.
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-6">
                            <h6>Return actual value</h6>
                            <input data-role="slider" data-show-min-max="true" data-return-type="value" data-min="-40" data-max="40" onchange="$('#slider-return-value').val(this.value)">
                            <input type="text" id="slider-return-value">
                        </div>
                        <div class="cell-md-6">
                            <h6>Return percent</h6>
                            <input data-role="slider" data-show-min-max="true" data-return-type="percent" data-min="-40" data-max="40" onchange="$('#slider-return-percent').val(this.value+'%')">
                            <input type="text" id="slider-return-percent">
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;input data-role="slider" data-return-type="value"&gt;
                    &lt;input data-role="slider" data-return-type="percent"&gt;
                </code></pre>

                <h3 id="_slider_accuracy">Accuracy</h3>
                <p>
                    You can set <code>accuracy</code> for slider with attribute <code>data-accuracy</code>.
                </p>
                <div class="example">
                    <input data-role="slider" data-accuracy="5" data-hint-always="true">
                </div>
                <pre><code>
                    &lt;input data-role="slider" data-accuracy="5" data-hint-always="true"&gt;
                </code></pre>

                <h3 id="_slider_target">Additional target</h3>
                <p>
                    You can put slider value to additional targets. To set it, add attribute <code>data-target="..."</code> to element. Value for this attribute must be selector specific string.
                </p>
                <div class="example">
                    <div class="row flex-align-center">
                        <div class="cell-md-4">
                            <input data-role="slider" data-target="#slider-target1, #slider-target2">
                        </div>
                        <div class="cell-md-4">
                            <div class="p-2 bg-cyan fg-white text-center" id="slider-target1"></div>
                        </div>
                        <div class="cell-md-4">
                            <input type="text" id="slider-target2">
                        </div>
                    </div>
                </div>
                <pre><code>
                    &lt;input data-role="slider" data-target="#slider-target1, #slider-target2"&gt;
                    &lt;div class="p-2 bg-cyan fg-white text-center" id="slider-target"&gt;&lt;/div&gt;
                    &lt;input type="text" id="slider-target2"&gt;
                </code></pre>

                <h3 id="_slider_buffer">Buffer</h3>
                <p>
                    Very often the slider is used to create a control in the media player where it is necessary to show the buffering process. Slider Metro 4 provides such a possibility "out of the box."
                    To set <code>buffer</code> use attribute <code>data-buffer</code> or special methods (see below).
                </p>
                <div class="example">
                    <input data-role="slider" data-buffer="60" data-value="20">
                </div>
                <pre><code>
                    &lt;input data-role="slider" data-buffer="60" data-value="20"&gt;
                </code></pre>
                <p class="remark warning">
                    Important! For buffer you must use <strong>percent</strong> value!
                </p>

                <!-- ads-html -->

                <h3 id="_slider_hint">Hint</h3>
                <p>
                    You can enable <code>hint</code> for slider. To enable <code>hint</code> add attribute <code>data-hint="true"</code> to element.
                </p>
                <div class="example">
                    <input data-role="slider" data-hint="true" data-value="50">
                </div>
                <pre><code>
                    &lt;input data-role="slider" data-hint="true"&gt;
                </code></pre>
                <p>
                    Also you can make the hint as permanent. To set <code>hint</code> in <code>permanent</code> mode add attribute <code>data-hint-always="true"</code>.
                </p>
                <div class="example">
                    <input data-role="slider" data-hint="true" data-hint-always="true" data-value="50">
                </div>
                <pre><code>
                    &lt;input data-role="slider" data-hint="true" data-hint-always="true"&gt;
                </code></pre>

                <h4 id="_slider_hint_position">Hint position</h4>
                <p>
                    You can set <code>hint position</code> with attribute <code>data-hint-position</code>. To set specific position use next values for this attribute:
                        <code>top</code>,
                        <code>bottom</code>,
                        <code>left</code> and
                        <code>right</code>.
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-3"><input data-role="slider" data-hint-position="top" data-hint-always="true" data-value="86" data-cls-hint="bg-red fg-white"></div>
                        <div class="cell-md-3"><input data-role="slider" data-hint-position="bottom" data-hint-always="true" data-value="21" data-cls-hint="bg-red fg-white"></div>
                        <div class="cell-md-3"><input data-role="slider" data-hint-position="left" data-hint-always="true" data-value="55" data-cls-hint="bg-red fg-white"></div>
                        <div class="cell-md-3"><input data-role="slider" data-hint-position="right" data-hint-always="true" data-value="77" data-cls-hint="bg-red fg-white"></div>
                    </div>
                </div>
                <pre><code>
                    &lt;input data-role="slider" data-hint-position="top"&gt;
                    &lt;input data-role="slider" data-hint-position="bottom"&gt;
                    &lt;input data-role="slider" data-hint-position="left"&gt;
                    &lt;input data-role="slider" data-hint-position="right"&gt;
                </code></pre>
                <h4 id="_slider_hint_value">Hint value</h4>
                <p>
                    You can use <code>template</code> for hint value with two variables <code>$1</code> and <code>$2</code>.
                    First - actual value, second - percent value.
                </p>
                <div class="example">
                    <input data-role="slider" data-show-min-max="true" data-hint-mask="V: $1, $2%" data-hint-always="true" data-value="0" data-min="-40" data-max="40" data-cls-hint="bg-cyan fg-white">
                </div>
                <pre><code class="html">
                    &lt;input data-role="slider"
                           data-hint-mask="V: $1, $2%"
                           data-hint-always="true"
                           data-value="0"
                            data-show-min-max="true"
                           data-min="-40" data-max="40"&gt;
                </code></pre>

                <h3 id="_slider_options">Options</h3>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Options</th>
                        <th>Data-*</th>
                        <th>Default</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>min</td>
                        <td><code>data-min</code></td>
                        <td>0</td>
                        <td>Min slider value</td>
                    </tr>
                    <tr>
                        <td>max</td>
                        <td><code>data-max</code></td>
                        <td>100</td>
                        <td>Max slider value</td>
                    </tr>
                    <tr>
                        <td>showMinMax</td>
                        <td><code>data-show-min-max</code></td>
                        <td>false</td>
                        <td>When true, additional block will be created and inserted before slider</td>
                    </tr>
                    <tr>
                        <td>value</td>
                        <td><code>data-value</code></td>
                        <td>0</td>
                        <td>Initial slider value</td>
                    </tr>
                    <tr>
                        <td>accuracy</td>
                        <td><code>data-accuracy</code></td>
                        <td>0</td>
                        <td>Slider accuracy</td>
                    </tr>
                    <tr>
                        <td>buffer</td>
                        <td><code>data-buffer</code></td>
                        <td>0</td>
                        <td>Initial slider buffer value</td>
                    </tr>
                    <tr>
                        <td>hint</td>
                        <td><code>data-hint</code></td>
                        <td>false</td>
                        <td>Show slider hint</td>
                    </tr>
                    <tr>
                        <td>hintAlways</td>
                        <td><code>data-hint-always</code></td>
                        <td>false</td>
                        <td>Show slider hint permanent</td>
                    </tr>
                    <tr>
                        <td>hintPosition</td>
                        <td><code>data-hint-position</code></td>
                        <td>top</td>
                        <td>Hint position. Can be: top, left, right, bottom</td>
                    </tr>
                    <tr>
                        <td>hintMask</td>
                        <td><code>data-hint-mask</code></td>
                        <td>$1</td>
                        <td>Hint output mask (template)</td>
                    </tr>
                    <tr>
                        <td>vertical</td>
                        <td><code>data-vertical</code></td>
                        <td>false</td>
                        <td>Vertical slider orientation</td>
                    </tr>
                    <tr>
                        <td>target</td>
                        <td><code>data-target</code></td>
                        <td></td>
                        <td>Additional targets for slider value</td>
                    </tr>
                    <tr>
                        <td>returnType</td>
                        <td><code>data-return-type</code></td>
                        <td></td>
                        <td>How value will be returned: value or percent</td>
                    </tr>
                    <tr>
                        <td>size</td>
                        <td><code>data-size</code></td>
                        <td>0</td>
                        <td>Slider specific size</td>
                    </tr>
                    </tbody>
                </table>

                <h3 id="_slider_events">Events</h3>
                <p>
                    When slider works, it generated the numbers of events. You can use callback for this event to behavior with slider.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Event</th>
                        <th>Data-*</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>onStart(val, percent, slider)</td>
                        <td><code>data-on-start</code></td>
                        <td>Fired when start sliding</td>
                    </tr>
                    <tr>
                        <td>onStop(val, percent, slider)</td>
                        <td><code>data-on-stop</code></td>
                        <td>Fired when stop sliding</td>
                    </tr>
                    <tr>
                        <td>onMove(val, percent, slider)</td>
                        <td><code>data-on-move</code></td>
                        <td>Fired when user move slider marker</td>
                    </tr>
                    <tr>
                        <td>onSliderClick(val, percent, slider)</td>
                        <td><code>data-on-slider-click</code></td>
                        <td>Fired when user clicked on slider</td>
                    </tr>
                    <tr>
                        <td>onChangeValue(val, percent, slider)</td>
                        <td><code>data-on-change-value</code></td>
                        <td>Fired when slider value was changed</td>
                    </tr>
                    <tr>
                        <td>onChangeBuffer(val, slider)</td>
                        <td><code>data-on-change-buffer</code></td>
                        <td>Fired when slider buffer value was changed</td>
                    </tr>
                    <tr>
                        <td>onFocus(val, percent, slider)</td>
                        <td><code>data-on-focus</code></td>
                        <td>Fired when slider marker get focus</td>
                    </tr>
                    <tr>
                        <td>onBlur(val, percent, slider)</td>
                        <td><code>data-on-blur</code></td>
                        <td>Fired when slider marker loses focus</td>
                    </tr>
                    <tr>
                        <td>onSliderCreate(slider)</td>
                        <td><code>data-on-slider-create</code></td>
                        <td>Fired when slider was created</td>
                    </tr>
                    </tbody>
                </table>

                <p>
                    Also you can use standard <code>onchage</code> event for <code>input</code> with <code>data-role="slider"</code>.
                </p>
                <div class="example">
                    <div class="row flex-align-center">
                        <div class="cell-md-6">
                            <input data-role="slider" data-show-min-max="true" data-min="-100" data-max="100" data-on-change="$('#event-receiver').val('Value: '+arguments[0]+', '+arguments[1]+'%')">
                        </div>
                        <div class="cell-md-6">
                            <input type="text" id="event-receiver">
                        </div>
                    </div>
                </div>
                <pre><code>
                    &lt;input data-role="slider"
                        data-show-min-max="true"
                        data-min="-100" data-max="100"
                        data-on-change="$('#event-receiver').val('Value: '+arguments[0]+', '+arguments[1]+'%')"&gt;

                    &lt;input type="text" id="event-receiver"&gt;
                </code></pre>

                <h3 id="_slider_methods">Methods</h3>
                <p>
                    In additional, You can use slider methods to interact with the component.
                </p>
                <ul>
                    <li><strong>val()</strong> - get value</li>
                    <li><strong>val(v)</strong> - set value</li>
                    <li><strong>buff()</strong> - get buffer value</li>
                    <li><strong>buff(v)</strong> - set buffer value</li>
                </ul>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-6">
                            <input type="number" min="0" max="100" oninput="$('#slider-methods').data('slider').val(this.value)">
                        </div>
                        <div class="cell-md-6">
                            <input data-role="slider" data-accuracy="10" id="slider-methods">
                        </div>
                    </div>
                </div>
                <pre><code>
                    &lt;div class="row"&gt;
                        &lt;div class="cell-md-6"&gt;
                            &lt;input type="number" min="0" max="100"
                            oninput="$('#slider-methods').data('slider').val(this.value)"&gt;
                        &lt;/div&gt;
                        &lt;div class="cell-md-6"&gt;
                            &lt;input data-role="slider" data-accuracy="10" id="slider-methods"&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_slider_observe">Observe</h3>
                <p>
                    You can change attributes <code>data-value</code>, <code>data-buffer</code> at runtime and slider will be updated.
                </p>
                <div class="example">
                    <h6>Change value in input and observe how value changed in slider</h6>
                    <div class="row">
                        <div class="cell-md-6">
                            <input type="number" min="0" max="100" id="inp-obs" value="0">
                        </div>
                        <div class="cell-md-6">
                            <input data-role="slider" id="slider-obs">
                        </div>
                    </div>
                </div>
                <pre><code>
                    &lt;div class="row"&gt;
                        &lt;div class="cell-md-6"&gt;
                            &lt;input type="number" min="0" max="100" id="inp-obs" value="0"&gt;
                        &lt;/div&gt;
                        &lt;div class="cell-md-6"&gt;
                            &lt;input data-role="slider" id="slider-obs"&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;script&gt;
                        $("#inp-obs").on("keyup input change paste propertychange", function(){
                            $('#slider-obs').attr('data-value', this.value);
                        })
                    &lt;/script&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_slider_customize">Customize</h3>
                <p>
                    If you need to customize the slider, you can use next options:
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Option</th>
                        <th>Data-*</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>clsSlider</td>
                        <td><code>data-cls-slider</code></td>
                        <td>Additional class for slider</td>
                    </tr>
                    <tr>
                        <td>clsBackside</td>
                        <td><code>data-cls-backside</code></td>
                        <td>Additional class for slider backside</td>
                    </tr>
                    <tr>
                        <td>clsComplete</td>
                        <td><code>data-cls-complete</code></td>
                        <td>Additional class for slider complete</td>
                    </tr>
                    <tr>
                        <td>clsBuffer</td>
                        <td><code>data-cls-buffer</code></td>
                        <td>Additional class for slider buffer</td>
                    </tr>
                    <tr>
                        <td>clsMarker</td>
                        <td><code>data-cls-marker</code></td>
                        <td>Additional class for slider marker</td>
                    </tr>
                    <tr>
                        <td>clsHint</td>
                        <td><code>data-cls-hint</code></td>
                        <td>Additional class for slider hint</td>
                    </tr>
                    <tr>
                        <td>clsMinMax</td>
                        <td><code>data-cls-min-max</code></td>
                        <td>Additional class for min-max info block</td>
                    </tr>
                    <tr>
                        <td>clsMin</td>
                        <td><code>data-cls-min</code></td>
                        <td>Additional class for min value for info block</td>
                    </tr>
                    <tr>
                        <td>clsMax</td>
                        <td><code>data-cls-max</code></td>
                        <td>Additional class for max value for info block</td>
                    </tr>
                    </tbody>
                </table>
                <div class="example">
                    <input data-role="slider"
                           data-value="50"
                           data-buffer="75"
                           data-hint-always="true"
                           data-hint-position="bottom"
                           data-show-min-max="true"
                           data-cls-backside="bg-dark"
                           data-cls-marker="bg-blue border-50 custom-marker"
                           data-cls-hint="bg-cyan custom-marker shadow-2"
                           data-cls-complete="bg-red"
                           data-cls-buffer="bg-yellow"
                           data-cls-min-max="bg-green fg-white p-2 mb-3-minus">
                </div>
                <pre><code>
                    &lt;input data-role="slider"
                           data-value="50"
                           data-buffer="75"
                           data-hint-always="true"
                           data-hint-position="bottom"
                           data-show-min-max="true"
                           data-cls-backside="bg-dark"
                           data-cls-marker="bg-blue border-50 custom-marker"
                           data-cls-hint="bg-cyan custom-marker shadow-2"
                           data-cls-complete="bg-red"
                           data-cls-buffer="bg-yellow"
                           data-cls-min-max="bg-green fg-white p-2 mb-3-minus"&gt;
                </code></pre>

                <h3 id="_slider_secret">Secret classes :)</h3>

                <div class="example">
                    <div data-role="slider" class="thin"></div>
                    <div data-role="slider" class="ultra-thin"></div>
                    <div data-role="slider" class="ultra-thin cycle-marker"></div>
                </div>
                <pre><code>
                    &lt;input data-role="slider" class="thin"&gt;
                    &lt;input data-role="slider" class="ultra-thin"&gt;
                    &lt;input data-role="slider" class="ultra-thin cycle-marker"&gt;
                </code></pre>

            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <script>
        $("#inp-obs").on("keyup input change paste propertychange", function(){
            $('#slider-obs').attr('data-value', this.value);
        })
    </script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>